<template>
	<view>
		<scroll-view class="navTar" scroll-x>
			<u-button shape="circle" type="warning" :plain="!(item.value==current)" @click="current = item.value"
				class="u-m-l-14 u-m-r-14" style="display: inline-block;" size="mini" v-for="(item,index) in navList"
				:key="index">{{item.name}}</u-button>
		</scroll-view>

		<view class="u-p-l-25 u-p-r-25">
			<view class="main u-border">
				<view class="head u-text-center ">
					<view>服务类型</view>
					<view>订单数</view>
					<view>总金额</view>
				</view>
				<u-table border-color="transparent" :th-style='thStyle'>

					<u-tr class="tr" v-for="(item,index) in list" :key="index">
						<u-th class="th">{{item.serverType}}</u-th>
						<u-th class="th">{{item.orderSum}}</u-th>
						<u-th class="th">{{item.totalAmount}}</u-th>
					</u-tr>

				</u-table>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { reactive, ref, watch } from "vue";
    import orderApi from '@/api/order';
	const current = ref(3)
  const thStyle = reactive({
    fontWeight:400,
    backgroundColor:'transparent'
  })

	const navList = ref([
		{
			name: '3天内',
			value: 3
		},
		{
			name: '7天内',
			value: 7
		},
		{
			name: '一月内',
			value: 30
		},
		{
			name: '两个月内',
			value: 60
		},
		{
			name: '三个月内',
			value: 90
		}
	])
  const list = ref([])

	const getList = ()=>{
		orderApi.getStatisticsData({
			date:current.value,
		}).then(res=>{
			list.value = res.data
		})
	}

	watch(current,()=>{
		getList()
	},{
		deep:true,
		immediate:true
	})


</script>

<style lang="scss" scoped>
	.navTar {
		padding: 28upx 0;
		white-space: nowrap;

	}

	.main {
		background-color: white;
		border-radius: 12upx;
		padding: 30upx 20upx 0;
		border-radius: 22upx;
		overflow: hidden;
		.head{
			display: grid;
			grid-template-columns: repeat(3,1fr);
			padding: 20upx 0;
			background-color: #ffc300;
			color: white;
		}

		:deep(u-th) {
			font-weight: 500 !important;
			padding: 12upx 0;
			background-color: transparent;
		}
	}
</style>
